<template>
  <div style="padding: 0 25px;">
    <div class="userAmountCard">
      <div class="userAmountHeader">
        <span class="userAmountTitle">{{ t('22_zichanxzgz') }}</span>
        <svg-load :name="showicon" class="yanjin" @click="handleYanjin" />
        <button v-if="showMoni == 'show'" class="switchBtn" @click="handleSwitch">{{ demoName }}</button>
      </div>
      <div class="userAmountValueRow">
        <span class="userAmountValue">{{ _numberWithCommas(Number(amount).toFixed(2)) }}USD</span>
      </div>
    </div>
  </div>

  <div style="padding: 0 20px;margin-bottom: 20px;">
    <div style="font-size: 20px;color: #000; font-weight: 600;margin-bottom: 10px;">{{ t('22_shouyiqushi') }}</div>
  </div>

  <div class="newNav">
    <div class="nav-btns">
      <div
        v-for="(item, idx) in navBtns"
        :key="idx"
        class="nav-btn"
        @click="toRecharge(item.url, idx)"
      >
        <div class="nav-icon-bg" :style="{ background: item.bg }">
          <img :src="item.icon" class="nav-icon" />
        </div>
        <div class="nav-label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/store/user/index'
import { dispatchCustomEvent } from '@/utils'
import { _toView } from '@/utils/public'
import { DIFF_RECHARGE_COSTORM } from '@/config/index'
import { showToast } from 'vant'

import cIcon from '@/assets/defi/c.png'
import tIcon from '@/assets/defi/t.png'
import zIcon from '@/assets/defi/z.png'
import jIcon from '@/assets/defi/j.png'

// ✅ 多语言函数（用 useI18n）
const { t } = useI18n()
const userStore = useUserStore()

const props = defineProps({
  data: Object,
  amount: String,
  coin: { type: String, default: 'USDT' },
  type: String,
  showicon: String,
  showMoni: String
})

const emit = defineEmits(['handleYanjin', 'handleShuaxin'])
const demoName = computed(() => {
  return userStore.isDemo
    ? t('22_qiehuanzhenshi') // 模拟账户 → 按钮显示“切换真实账户”
    : t('22_qiehuanmoni')    // 真实账户 → 按钮显示“切换模拟账户”
})


onMounted(() => {
  handleShuaxin()
})

const handleYanjin = () => emit('handleYanjin')
const handleShuaxin = () => emit('handleShuaxin')

const handleSwitch = () => {
  if (userStore.isDemo) {
    //demoName.value = t('22_qiehuanmoni') // 切換真實帳戶
    userStore.switchAccount(0)
  } else {
  //  demoName.value = t('22_qiehuanzhenshi') // 切換模擬帳戶
    userStore.switchAccount(1)
  }

}

// ✅ 按钮导航
const navBtns = [
  { icon: cIcon, bg: '#d7cde4', label: t('22_recharge'), url: '/recharge' },
  { icon: tIcon, bg: '#dff1f0', label: t('22_withdraw'), url: '/withdraw' },
  { icon: zIcon, bg: '#f9ffd5', label: t('22_transfer'), url: '/transfer' },
  { icon: jIcon, bg: '#ffe2d5', label: t('22_record'), url: '/record' }
]

// ✅ 功能跳转
const toRecharge = (url, idx) => {
  if (idx === 0) {
    if (userStore.isDemo) {
      showToast(t('22_monimode_no_recharge'))
      return
    }
    _toView('/recharge-apply?type=USDT-TRC&coin=usdt')
    return
  }
  if (idx === 1) {
    if (userStore.isDemo) {
      showToast(t('22_monimode_no_withdraw'))
      return
    }
    _toView('/withdraw-apply?type=USDT-TRC&coin=usdt')
    return
  }
  if (idx === 2) {
    _toView('/transfer-apply')
    return
  }
  if (idx === 3) {
    _toView('/finance-record')
    return
  }

  if (DIFF_RECHARGE_COSTORM.includes(__config._APP_ENV) && url == '/recharge') {
    dispatchCustomEvent('event_serviceChange')
  } else {
    _toView(url)
  }
}
</script>

<style lang="scss" scoped>
.userAmountCard {
  background: url('@/assets/defi/infobg.png') center/cover no-repeat;
  border-radius: 20px;
  padding: 30px 15px 15px 15px;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.userAmountHeader {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
}

.userAmountTitle {
  font-size: 16px;
  font-weight: 600;
  margin-right: 8px;
}

.infoIcon {
  width: 18px;
  height: 18px;
  margin-right: auto;
  margin-left: 2px;
}

.switchBtn {
  background: rgba(255,255,255,0.10);
  border: none;
  border-radius: 16px;
  color: #fff;
  font-size: 13px;
  padding: 4px 14px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}
.switchBtn:hover {
  background: rgba(255,255,255,0.18);
}

.userAmountValueRow {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.userAmountValue {
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-right: 16px;
}

.yanjin {
  font-size: 20px;
  margin-right: 12px;
  cursor: pointer;
}
.shuaxin {
  font-size: 18px;
  cursor: pointer;
}

.currencyAbout {
  padding: 0 5px 20px;
  display: flex;
  text-align: center;
  & > div {
    width: 25%;
  }
  .currencyIcon {
    font-size: 40px;
    margin-bottom: 10px;
  }
}
.newNav {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  .nav-btns {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }
  .nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    margin: 0 8px;
    cursor: pointer;
    transition: box-shadow 0.2s;
    position: relative;
    background: none;
    border-radius: 0;
    height: auto;
  }
  .nav-icon-bg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .nav-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 0;
  }
  .nav-label {
    font-size: 16px;
    color: #111;
    font-weight: 600;
    text-align: center;
    margin-top: 2px;
  }
}
</style>
